<template>
    <div class="app-container">
        <el-card class="box-card">
            <div
                slot="header"
                style="display: flex; justify-content: space-between"
            >
                <span>车辆详情</span>
                <el-button @click="pageReturn">返回</el-button>
            </div>
            <div class="top-card">
                <el-image src="" style="width: 100px; height: 100px"></el-image>
                <div class="top-card-right">
                    <div
                        style="
                            font-size: 16px;
                            display: flex;
                            justify-content: space-between;
                        "
                    >
                        <div>
                            <span style="font-weight: 600">车架号：</span
                            ><span>{{ detailForm.vinNo }}</span>
                        </div>
                        <div>
                            <span style="font-weight: 600">车辆状态：</span
                            ><span>{{ detailForm.vinNo }}</span>
                        </div>
                    </div>
                    <div>
                        <span>品牌/车型/车款：</span
                        ><span>{{
                            `${detailForm.brandName}/${detailForm.seriesName}/${detailForm.modelName}`
                        }}</span>
                    </div>
                    <div>
                        <span>车辆归属：</span
                        ><span>{{ detailForm.carDepotName }}</span>
                    </div>
                </div>
            </div>
        </el-card>
        <el-form :model="detailForm">
            <el-tabs
                v-model="activeName"
                @tab-click="handleClick"
                v-if="isForm"
            >
                <el-card class="box-card">
                    <div slot="header">
                        <span>车辆信息</span>
                    </div>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="车架号:">
                                <el-input
                                    v-model="detailForm.vinNo"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.vinNo }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="车牌号:">
                                <el-input
                                    v-model="detailForm.vinNo"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.vinNo }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="品牌/车型/车款:">
                                <el-input
                                    v-model="detailForm.vinNo"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.vinNo }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="产权方:">
                                <el-input
                                    v-model="detailForm.carOwner"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.vinNo }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="车辆归属:">
                                <el-input
                                    v-model="detailForm.carDepotName"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{
                                    detailForm.carDepotName
                                }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="订单编号:">
                                <el-input
                                    v-model="detailForm.orderCode"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.orderCode }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="客户名称:">
                                <el-input
                                    v-model="detailForm.orderCode"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.orderCode }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="合同类型:">
                                <el-input
                                    v-model="detailForm.orderCode"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.orderCode }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="车辆性质:">
                                <el-input
                                    v-model="detailForm.orderCode"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.orderCode }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="车辆状态:">
                                <el-input
                                    v-model="detailForm.orderCode"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.orderCode }}</span>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="车辆登记日:">
                                <el-input
                                    v-model="detailForm.orderCode"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.orderCode }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="座位数:">
                                <el-input
                                    v-model="detailForm.orderCode"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.orderCode }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="燃油类型:">
                                <el-input
                                    v-model="detailForm.orderCode"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.orderCode }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="年检线上或线下:">
                                <el-input
                                    v-model="detailForm.orderCode"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.orderCode }}</span>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="上次年检到期日:">
                                <el-input
                                    v-model="detailForm.orderCode"
                                    v-if="isEdit"
                                ></el-input>
                                <span v-else>{{ detailForm.orderCode }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>
                <el-tab-pane label="年检信息" name="first">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>年检信息</span>
                        </div>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="年检时间:">
                                    <el-input
                                        v-model="detailForm.orderCode"
                                        v-if="isEdit"
                                    ></el-input>
                                    <span v-else>{{
                                        detailForm.orderCode
                                    }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="线上/线下:">
                                    <el-input
                                        v-model="detailForm.orderCode"
                                        v-if="isEdit"
                                    ></el-input>
                                    <span v-else>{{
                                        detailForm.orderCode
                                    }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="预计下次年检到期日:">
                                    <el-input
                                        v-model="detailForm.orderCode"
                                        v-if="isEdit"
                                    ></el-input>
                                    <span v-else>{{
                                        detailForm.orderCode
                                    }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="年检线上/线下:">
                                    <el-input
                                        v-model="detailForm.orderCode"
                                        v-if="isEdit"
                                    ></el-input>
                                    <span v-else>{{
                                        detailForm.orderCode
                                    }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="年检费:">
                                    <el-input
                                        v-model="detailForm.orderCode"
                                        v-if="isEdit"
                                    ></el-input>
                                    <span v-else>{{
                                        detailForm.orderCode
                                    }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="年检待办费:">
                                    <el-input
                                        v-model="detailForm.orderCode"
                                        v-if="isEdit"
                                    ></el-input>
                                    <span v-else>{{
                                        detailForm.orderCode
                                    }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="综合测算费:">
                                    <el-input
                                        v-model="detailForm.orderCode"
                                        v-if="isEdit"
                                    ></el-input>
                                    <span v-else>{{
                                        detailForm.orderCode
                                    }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="二维费用:">
                                    <el-input
                                        v-model="detailForm.orderCode"
                                        v-if="isEdit"
                                    ></el-input>
                                    <span v-else>{{
                                        detailForm.orderCode
                                    }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="其他费用:">
                                    <el-input
                                        v-model="detailForm.orderCode"
                                        v-if="isEdit"
                                    ></el-input>
                                    <span v-else>{{
                                        detailForm.orderCode
                                    }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="年检总金额:">
                                    <el-input
                                        v-model="detailForm.orderCode"
                                        v-if="isEdit"
                                    ></el-input>
                                    <span v-else>{{
                                        detailForm.orderCode
                                    }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="年检标识:">
                                    <img-upload
                                        v-model="detailForm.file1"
                                        v-if="isEdit"
                                    />
                                    <el-image
                                        style="width: 120px; height: 120px"
                                        :src="url"
                                        :preview-src-list="srcList"
                                        v-else
                                    >
                                    </el-image>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="年检发票:">
                                    <img-upload
                                        v-model="detailForm.file2"
                                        v-if="isEdit"
                                    />
                                    <el-image
                                        style="width: 120px; height: 120px"
                                        :src="url"
                                        :preview-src-list="srcList"
                                        v-else
                                    >
                                    </el-image>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="年检备注:">
                                    <el-input
                                        v-model="detailForm.orderCode"
                                        type="textarea"
                                        v-if="isEdit"
                                    ></el-input>
                                    <pre v-else>{{ detailForm.orderCode }}</pre>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card class="box-card">
                        <div slot="header">
                            <span>财务报销信息</span>
                        </div>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="付款凭证:">
                                    <img-upload
                                        v-model="detailForm.file3"
                                        v-if="isEdit"
                                    />
                                    <el-image
                                        style="width: 120px; height: 120px"
                                        :src="url"
                                        :preview-src-list="srcList"
                                        v-else
                                    >
                                    </el-image>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card class="box-card">
                        <div slot="header">
                            <span>审批记录</span>
                        </div>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="年检记录" name="second">
                    <el-card>
                        <div slot="header">
                            <el-row>
                                <el-col :span="8" class="box-card-inp">
                                    <div class="inp-name">年检总次数：</div>
                                    <div></div>
                                </el-col>
                            </el-row>
                        </div>
                        <el-table v-loading="false" :data="historyList" border>
                            <el-table-column
                                label="序号"
                                align="center"
                                width="60"
                                type="index"
                            >
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                align="center"
                                width="80"
                            >
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        type="text"
                                        v-hasPermi="['demo:demo:remove']"
                                        >查看</el-button
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column
                                v-for="i in historyCol"
                                :label="i.label"
                                align="center"
                                :prop="i.prop"
                                :width="i.width"
                            ></el-table-column>
                        </el-table>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </div>
</template>

<script>
import ImgUpload from "../components/ImgUpload/index.vue";
import { getInspectionDetails } from "@/api/njgl/inspectAnnuallyApi.js";
import { getToken } from "@/utils/auth";
export default {
    name: "InspectAnnuallyDetails",
    components: {
        ImgUpload,
    },
    computed: {},
    data() {
        return {
            url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            srcList: [
                "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
                "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
            ],
            isEdit: true,
            isForm: false,
            routeQuery: {},
            activeName: "first",
            detailForm: {},
            insureDetailList: [
                {
                    insuranceType: "强盗险",
                    coverage: "50",
                    InsuranceCosts: "40",
                },
                {
                    insuranceType: "车辆损失险",
                    coverage: "100",
                    InsuranceCosts: "100",
                },

                {
                    insuranceType: "第三者责任险",
                    coverage: "60",
                    InsuranceCosts: "60",
                },

                {
                    insuranceType: "乘客险保额",
                    coverage: "60",
                    InsuranceCosts: "60",
                },

                {
                    insuranceType: "司机险保额",
                    coverage: "60",
                    InsuranceCosts: "60",
                },

                {
                    insuranceType: "划痕险",
                    coverage: "60",
                    InsuranceCosts: "60",
                },

                {
                    insuranceType: "其他险种",
                    coverage: "60",
                    InsuranceCosts: "60",
                },
            ],
            insureCol: [
                {
                    prop: "insuranceType",
                    label: "商业险种",
                },
                {
                    prop: "coverage",
                    label: "保额/万元",
                },
                {
                    prop: "InsuranceCosts",
                    label: "保险费用/元",
                },
            ],
            historyList: [],
            historyCol: [
                {
                    prop: "carNo",
                    label: "年检状态",
                },
                {
                    prop: "vinNo",
                    label: "实际开始时间",
                },
                {
                    prop: "brandName",
                    label: "实际结束时间",
                },

                {
                    prop: "modelName",
                    label: "年检到期日",
                },
                {
                    prop: "seriesName",
                    label: "线上/线下",
                },
                {
                    label: "车管负责人",
                    prop: "businessType",
                },
                {
                    prop: "seriesName",
                    label: "费用类型",
                },
                {
                    label: "年检金额",
                    prop: "businessType",
                },
                {
                    label: "年检标识",
                    prop: "businessType",
                },
                {
                    prop: "seriesName",
                    label: "年检发票",
                },
                {
                    label: "记录时间",
                    prop: "businessType",
                },
            ],
            dataList: [],
        };
    },
    watch: {
        // $route: {
        //   handler: function (val, oldVal) {
        //     console.log(val);
        //   },
        //   // 深度观察监听
        //   deep: true
        // }
    },
    computed: {
        rowManage() {
            return (arr, type) => {
                let obj = {};
                let arri = [];
                arri = arr.filter((v) => {
                    return v.type == type;
                });
                return (obj = arri[0] || {});
            };
        },
    },
    created() {
        this.routeQuery = this.$route.query;
        this.inspectionDetails();
        // this.getBrandNames()
    },
    methods: {
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        pageReturn() {
            this.$router.push({
                path: "/njgl/inspectAnnuallyList",
            });
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        inspectionDetails() {
            getInspectionDetails(this.routeQuery.id).then((res) => {
                if (res.code == "200") {
                    this.detailForm = res.data || {};

                    this.isForm = true;
                }
            });
        },
    },
};
</script>


<style lang="scss" scoped>
.box-card {
    font-size: 14px;
    margin-bottom: 20px;

    .box-card-inp {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .inp-name {
            width: 140px;
            text-align: right;
            font-size: 14px;
        }

        .inp-name-r {
            flex: 1;
        }
    }

    .top-card {
        display: flex;

        img {
            display: block;
            width: 200px;
            height: 160px;
        }

        .top-card-right {
            flex: 1;
            margin-left: 20px;
            font-size: 14px;
            line-height: 36px;
        }
    }
}

// .form-dialog {
//   ::v-deep .el-dialog__header {
//     padding: 10px 20px;
//     border-bottom: 1px solid #DCDFE6;

//     .el-dialog__headerbtn {
//       top: 15px;
//     }
//   }

// .box-card {
//   margin-bottom: 20px;

//   .card-title {
//     font-size: 16px;
//     position: relative;
//     margin-left: 8px;
//     padding: 0;
//   }

//   .card-title::after {
//     content: '';
//     width: 4px;
//     height: 18px;
//     background-color: aqua;
//     display: block;
//     position: absolute;
//     left: -12px;
//     top: 2px;
//   }
// }

// }
</style>
